<script setup>

import {onMounted, ref, watch} from "vue";
import {MyLeftBarIcon} from "../data/MyLeftBar";
import bus from "../lib/bus";

const activeNames = ref(["1"]);
const leftBarIcons = ref([]);
onMounted(()=>{
  leftBarIcons.value = MyLeftBarIcon;
})


const handleChange = ()=>{
}
const onDragStart =  (e,item)=>{
  bus.$emit('onDragStart',{e,item});
}
const onTouchStart = (e,item)=>{
  bus.$emit('onTouchStart',{e,item});
}
</script>

<template>
  <el-aside width="200px" style="margin-left: 0.5%">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item v-for="(item,ind) in leftBarIcons" :key="ind" :title="item.name" :name="ind">
        <div class="thumbs">
          <div v-for="info in item.list" :key="info.id" class="thumb flex">
            <div
:title="info.name" class="center hover" draggable="true"
                 @dragstart="onDragStart($event,info)" @click="onTouchStart($event,info)">
              <span :class="`icon-size ${info.icon}`"/>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-aside>
</template>

<style scoped>
.thumbs{
  display: flex;
  flex-wrap: wrap;
  margin-left: 8px;
}
.thumbs .thumb{
  width: 25%;
}
.thumbs .flex{
  align-items: center;
  justify-content: space-between;
}
.thumbs .thumb>div{
  width: 100%;
}
.thumbs .icon-size{
  font-size: 25px!important;
  width: 25px;
}
</style>